<section>
  <d-button bsStyle="text" (click)="filter()">高级过滤</d-button>
  <div [ngStyle]="{ display: isShowFilterPannel ? 'block' : 'none' }" class="advanced-filter-panel">
    <form dForm [layout]="'columns'">
      <div class="grid">
        <div class="u-1-4" *ngFor="let control of listOfControls; let i = index">
          <d-form-item>
            <d-form-label [hasHelp]="true" [helpTips]="'这是计划名，计划名字，计划名'">{{ control.label }}</d-form-label>
            <d-form-control>
              <input dTextInput type="text" name="{{ control.name }}" />
            </d-form-control>
          </d-form-item>
        </div>
      </div>
      <d-form-operation>
        <d-button bsStyle="stress" class="mr-element-spacing" circled="true">过滤</d-button>
        <div class="btn-group g-dropdown" dDropDown [closeScope]="'blank'" (onToggle)="onToggle($event)" #myDropdown="d-dropdown">
          <a dDropDownToggle class="devui-dropdown-default">
            增加过滤字段
            <span class="icon-chevron-down"></span>
          </a>
          <ul dDropDownMenu class="padding-element-spacing" role="menu">
            <li role="menuitem" style="width: 600px; height: 400px; margin-right: 10px;">
              <div class="field-text">已选字段</div>
              <div class="grid">
                <div class="u-1-5" *ngFor="let option of selectedOptions">
                  <d-checkbox
                    class="mb-element-spacing ck"
                    name="{{ option.name }}"
                    [label]="option['label']"
                    [(ngModel)]="option['checked']"
                  ></d-checkbox>
                </div>
              </div>
              <div class="field-text">可选字段</div>
              <div class="grid">
                <div class="u-1-5" *ngFor="let option of checkboxOptions">
                  <d-checkbox
                    class="mb-element-spacing ck"
                    name="{{ option.name }}"
                    [label]="option['label']"
                    [(ngModel)]="option['checked']"
                  ></d-checkbox>
                </div>
              </div>
              <d-button bsStyle="stress" class="mr-element-spacing" (click)="AddField(myDropdown)" circled="true">确定</d-button>
              <d-button bsStyle="common" circled="true" (click)="cancel(myDropdown)">取消</d-button>
            </li>
          </ul>
        </div>
      </d-form-operation>
    </form>
  </div>
</section>
